<template>
  <div style="height:520px;">
    <template v-if="showindexuid">
      <img class="logoimg" :src="userinfo.headimg" style="border-radius:50%;" v-if="userinfo.headimg">
      <img class="logoimg" src="static/login.png" style="border-radius:50%;" v-else>
      <h2>{{ userinfo.remarks }}</h2>
    </template>
    <template v-else>
      <img class="logoimg" src="static/login.png" style="border-radius:50%;">
      <h1>去<a href="javascript:;" @click="gotosquare">广场</a>看看别人的收藏夹，并且据为己有</h1>
    </template>
    <h2>主题</h2>
      <transition-group name="fadeindex" tag="ul">
        <li v-for="(l, index) in links" :key="index">
          <router-link :to="{ name:'topic', params:{id:l.id}}">{{l.topicname}}</router-link>
        </li>
      </transition-group>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      links: [],
      userinfo: {}
    }
  },
  methods: {
    getmsg: function () {
      var that = this
      if (that.showindexuid) {
        that.H.ajax('/home/index/getindexuser', {uid: that.showindexuid}, 'get', function (response) {
          if (response.success) {
            that.userinfo = response.data.userinfo
            that.links = response.data.topiclist
          } else {
            that.H.error('网络错误！')
          }
        })
      } else {
        that.links = []
      }
    },
    gotosquare: function () {
      this.H.openwin('/square', 'square', true)
    }
  },
  computed: {
    showindexuid: function () {
      if (this.$store.state.showindexuid) {
        return this.$store.state.showindexuid
      } else {
        var showid = this.H.GL('showindexuid')
        showid = showid || 0
        this.H.sendstore('showindexuid', showid)
        return this.$store.state.showindexuid
      }
    }
  },
  watch: {
    showindexuid: function () {
      this.getmsg()
    }
  },
  mounted: function () {
    this.getmsg()
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.fadeindex-enter-active{
    transition: all 0.2s linear;
}
.fadeindex-enter{
   opacity: 0;
   transform:translateY(20px);
}
.logoimg{
  margin-top: 30px;
  width:150px;
  height:150px;
}
</style>
